<template>
  <div class="menu">
    <el-menu default-active="2" class="el-menu-vertical-demo" router>
      <el-menu-item index="/MoniterView/Meteorology" class="item">
        <el-icon class="icon"><MostlyCloudy /></el-icon>
        <span>气象</span>
      </el-menu-item>
      <!-- <el-menu-item index="/MoniterView/Fry" class="item">
          <el-icon class="icon"><TrendCharts /></el-icon>
          <span>鱼苗</span>
        </el-menu-item> -->
      <el-menu-item index="/MoniterView/Water" class="item">
        <el-icon class="icon"><Odometer /></el-icon>
        <span>水质</span>
      </el-menu-item>
      <el-sub-menu>
        <template #title>
          <el-icon class="icon"><Bell /></el-icon>预警
        </template>
        <el-menu-item index="/Moniter/Early/Setting">
          <el-icon class="icon"><SetUp /></el-icon>
          阈值设置</el-menu-item
        >
        <el-menu-item index="/Moniter/Early/Rule">
          <el-icon class="icon"><Memo /></el-icon>
          预警规则</el-menu-item
        >
        <el-menu-item index="/Moniter/Early/Strategy">
          <el-icon class="icon"><FolderRemove /></el-icon>
          预警策略</el-menu-item
        >
        <el-menu-item index="/Moniter/Early/Record">
          <el-icon class="icon"><CopyDocument /></el-icon>
          预警记录</el-menu-item
        >
      </el-sub-menu>
    </el-menu>
  </div>
  <div class="routeview">
    <router-view></router-view>
  </div>
</template>

<script setup>
import {
  Odometer,
  MostlyCloudy,
  Bell,
  SetUp,
  Memo,
  FolderRemove,
  CopyDocument,
} from '@element-plus/icons-vue'
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.menu {
  width: 15%;
  float: left;
  box-shadow: 0 0 0.1852rem rgba(0, 0, 0, 0.2);
  height: 90vh;
  margin: 0 0 0 0;
}
.routeview {
  width: 85%;
  float: left;
  height: 90vh;
}
.item {
  padding: 0.6rem;
  text-align: center;
}
.icon {
  margin-left: 0.4rem;
}
</style>
